<script setup>
import { onMounted, ref, watch } from 'vue';

const regcode = ref('')
const regstatus = ref('')
function reloadApp(){
  window.main2render.send('renderer-register', regcode.value)
}
onMounted(() => {
  window.main2render.receive('update-regstatus', (data) => {
    regstatus.value = data.message
    setTimeout(() => {
      regstatus.value = ''
    }, 5000);
  })
})
watch(regcode, (newValue) => {
  console.log(newValue)
})
</script>
<template>
  <div class="reg_container">
    <p id="wenzi">软件已超出试用期限，请将新的注册码输入下面的输入框，重新注册软件！</p>
    <input id="regcode_input" v-model.lazy="regcode" type="text">
    <div id="regcode_status">{{ regstatus }}</div>
    <div id="anzc" @click="reloadApp">注册</div>
  </div>
</template>
<style lang="scss" scoped>
.reg_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  #wenzi{
    color: red;
    margin-bottom: 3rem;
    z-index: 2;
  }
  #regcode_input {
    width: 90%;
    height: 5rem;
    font-size: 3rem;
  }
  #regcode_status {
    font-size: 3rem;
    height: 4rem;
    color: red;
  }
  #anzc {
    width: 10rem;
    height: fit-content;
    margin-top: 3rem;
    text-align: center;
    font-size: 3rem;
    color: greenyellow;
    background-color: white;
    z-index: 4;
  }
}
</style>
